import {
  ActionType,
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import React from "react";
import {postAddApiInfo} from "@/services/api_info/jiekoumokuai";
import {message} from "antd";

export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.RuleListItem>;

export type CreateFormProps = {
  handOpen:React.Dispatch<React.SetStateAction<boolean>>
  createModalOpen: boolean;
  actionRef: React.MutableRefObject<ActionType | undefined>
};

const CreateForm: React.FC<CreateFormProps> = (props) => {
  const intl = useIntl();
  return (
    <ModalForm
    open={props.createModalOpen}
    onOpenChange={props.handOpen}
    modalProps={{destroyOnClose:true}}
    onFinish={async(value) => {
      const res = await postAddApiInfo(value as API.AddApiInfoVo)
      if (res?.code === 200){
        props.handOpen(false)
        if (props.actionRef.current) {
          props.actionRef.current.reload();
        }
        message.success("添加成功")
    }}
    }
    >
      <ProFormText
        name="name"
        label='接口名称'
        width="md"
        rules={[
          {
            required: true,
            message: '请输入接口名称',
          },
        ]}
      />
      <ProFormText
        name="path"
        label='接口路径'
        width="md"
        rules={[
          {
            required: true,
            message: '请输入接口路径',
          },
        ]}
      />
      <ProFormSelect
        options={[
          {
            value: 'GET',
            label: 'GET',
          },
          {
            value: 'POST',
            label: 'POST',
          },
        ]}
        width="md"
        name="method"
        label="请求方式"
      />
      <ProFormTextArea
        name="description"
        width="lg"
        label='接口描述'
        placeholder='请输入至少五个字符'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
      />
      <ProFormTextArea
        name="requestParam"
        width="lg"
        label='请求参数'
        placeholder='请输入请求参数'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
      />
      <ProFormTextArea
        name="requestHeader"
        width="lg"
        label='请求头'
        placeholder='请输入请求头'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
      />
      <ProFormTextArea
        name="responseHeader"
        width="lg"
        label='响应头'
        placeholder='请输入响应头'
        rules={[
          {
            required: true,
            message: '请至少输入五个字符',
            min: 5,
          },
        ]}
      />
    </ModalForm>
  );
};

export default CreateForm;
